<div class="flex-col items-center hidden md:flex">
  <form
    style="display: flex; flex-direction: column; align-items: center; width: 400px"
    class="rounded p-5 {{ subscribeclass | default("bg-gray-100") }}"
    action="https://tinyletter.com/jlongster"
    method="post"
    target="popupwindow"
    onsubmit="window.open('https://tinyletter.com/jlongster', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true"
  >
    <h1 class="mb-4" style="font-size:30px">
      Join the newsletter
    </h1>
    <svg
      width="46"
      height="50"
      viewBox="0 0 46 50"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M23 40C22.813 40 22.627 39.948 22.463 39.844L0.463015 25.844C0.159015 25.651 -0.0169849 25.308 0.00101511 24.948C0.0200151 24.589 0.230015 24.266 0.553015 24.105L23 10L45.447 24.105C45.769 24.266 45.98 24.588 45.999 24.948C46.018 25.308 45.841 25.65 45.537 25.844L23.537 39.844C23.373 39.948 23.187 40 23 40Z"
        fill="#504287"
      />
      <g filter="url(#filter0_d)">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M38 41H8.00002V5C8.00002 4.448 8.44802 4 9.00002 4H37C37.552 4 38 4.448 38 5V41Z"
          fill="white"
        />
      </g>
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M45 50C44.916 50 44.831 49.989 44.748 49.968L21.748 43.968L22 37L46 25V49C46 49.31 45.856 49.602 45.611 49.792C45.435 49.928 45.219 50 45 50Z"
        fill="#8577BD"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M45 50H1.00002C0.447015 50 1.52588e-05 49.552 1.52588e-05 49V25L45.479 48.122C45.88 48.341 46.083 48.804 45.969 49.247C45.856 49.69 45.457 50 45 50Z"
        fill="#B2A6E3"
      />
      <line x1="13" y1="12.5" x2="33" y2="12.5" stroke="#A495E3" />
      <line x1="13" y1="22.5" x2="30" y2="22.5" stroke="#A495E3" />
      <line x1="13" y1="17.5" x2="26" y2="17.5" stroke="#A495E3" />
      <defs>
        <filter
          id="filter0_d"
          x="4.00002"
          y="0"
          width="38"
          height="45"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="2" />
          <feColorMatrix
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
          />
          <feBlend
            mode="normal"
            in2="BackgroundImageFix"
            result="effect1_dropShadow"
          />
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="effect1_dropShadow"
            result="shape"
          />
        </filter>
      </defs>
    </svg>
    <div class="py-4 text-sm">
      Working on <a href="https://actualbudget.com/">Actual</a> and
      bootstrapping it. I write about what I'm learning along the way.
    </div>

    <input
      class="rounded px-2 py-1 border"
      type="text"
      placeholder="Email"
      style="width:250px"
      name="email"
      id="tlemail"
    />

    <input type="hidden" value="1" name="embed" />
    <input
      class="px-2 py-1 my-4 bg-teal-700 text-white rounded"
      type="submit"
      value="Subscribe"
    />
    <div class="text-sm text-gray-300">
      I'll never send you spam, I promise. Unsubscribe at any time.
    </div>
  </form>
</div>
